<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>好看的登录</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <div class="box">
         <!-- 遮罩层部分 -->
         <div class="img-box">
                
        </div>
        <!-- 注册 -->
        <div class="left-box">
            <!-- 内容部分 -->
            <div class="content">
                <h1>注册</h1>
                <div class="int-box">
                <input type="text" placeholder="用户名">
                <input type="text" placeholder="密码">
                <input type="text" placeholder="确认密码">
            </div>
            <div class="btn-box">
                <button onmousedown="btn()" onmouseup="btnup()" onmouseout="btnup()">注册</button>
                <span onclick="move()">以有账号？去登录吧！</span>
            </div>
            </div>
        </div>
        <!-- 登录 -->
        <div class="left-box right-box">
            <h1>登录</h1>
            <div class="int-box">
                <input type="text" placeholder="用户名">
                <input type="text" placeholder="密码">
            </div>
            <div class="btn-box">
                <button onmousedown="btn()" onmouseup="btnup()" onmouseout="btnup()">登录</button>
                <span onclick="move()" >没有账号？去注册吧！</span>
            </div>
        </div>
    </div>
</body>
<script>
    let flag=true
    let flagBtn=true
    const move=()=>{
            if(flag){
            $('.img-box').css('left','400px')
            $('.img-box').css('backgroundColor','rgb(241, 168, 168)')
            $('input').val('')
        }else{
            $('.img-box').css('left','0')
            $('.img-box').css('backgroundColor','rgb(101, 92, 184)')
            $('input').val('')
        }
        flag=!flag
    }
    const btn=()=>{
            $('button').css('color','white')
    }
    const btnup=()=>{
        $('button').css('color','black')
    }
</script>
</html>